<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo menu"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>管理部门</span>
      </template>
      <el-menu-item
        class="tab"
        v-for="item in guanLi"
        :key="item.id"
        :index="item.id"
        @click="changeForm(item)"
        >{{ item.name }}</el-menu-item
      >
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>技术部门</span>
      </template>
      <el-menu-item
        class="tab"
        v-for="item in jiShu"
        :key="item.id"
        :index="item.id"
        @click="changeForm(item)"
        >{{ item.name }}</el-menu-item
      >
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  name: "NavMenu",
  data() {
    return {
      guanLi: [
        {
          name: "人力资源部",
          id: "101",
        },
        {
          name: "采购部",
          id: "102",
        },
        {
          name: "商务组",
          id: "103",
        },
      ],
      jiShu: [
        {
          name: "算法分析",
          id: "201",
        },
        {
          name: "后端部门",
          id: "202",
        },
        {
          name: "前端部门",
          id: "203",
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    },
    changeForm(e) {
        this.$emit('showtableDate',e);
    }
  },
};
</script>
<style scoped>
.menu {
  height: 100vh;
  width: 100%;
}
.tab {
  width: 100%;
  min-width: 10%;
}
</style>
